<div
  class="surface-300 text-gray-100 p-3 pl-8 pr-8 justify-content-start align-items-center flex-wrap"
  [appHighlightCourses]="course.creationDate"
>
  <div
    [ngClass]="course.topRated ? 'bg-blue-100' : 'surface-card'"
    class="p-4 shadow-2 border-round"
  >
    <div class="flex">
      <div
        class="flex-1 flex align-items-center justify-content-start font-bold text-gray-900 m-2 px-2 py-3 border-round text-3xl font-medium text-900 mb-3"
      >
        {{ course.title | uppercase }}
        <span class="pl-2"></span>

        <div *ngIf="course.topRated">
          <span class="pi pi-star-fill text-3xl text-orange-500"></span>
        </div>
      </div>

      <div
        class="flex-initial flex align-items-center justify-content-end font-bold text-gray-900 m-2 px-5 py-3 border-round"
      >
        <span class="pl-4"></span>
        <span class="pi pi-clock text-blue-600 font-bold text-lg"></span>
        <span class="text-base pl-2"> {{ course.duration | duration }}</span>

        <span class="pl-4"></span>
        <span class="pi pi-calendar text-blue-600 font-bold text-lg"></span>
        <span class="text-base pl-2">
          {{ course.creationDate | date : 'dd MMMM yyyy' : '' : 'ru-Ru' }}</span
        >
      </div>
    </div>

    <div class="flex">
      <div
        class="flex-1 flex align-items-center justify-content-start font-bold text-gray-900 m-2 px-2 py-3 border-round"
      >
        {{ course.description }}
      </div>

      <div
        class="flex-initial flex align-items-center justify-content-end font-bold m-2 px-5 py-3 border-round"
      >
        <div>
          <span class="pl-4"></span>

          <p-button
            styleClass="p-button-secondary"
            icon="pi pi-pencil"
            (click)="editCourse()"
          ></p-button>
          <span class="pl-4"></span>
          <p-button
            styleClass="p-button-danger"
            icon="pi pi-trash"
            (click)="showConfirmDeletionDialog()"
          ></p-button>
        </div>
      </div>
    </div>
  </div>
</div>
